<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        b {
            color: lightgreen;
        }
    </style>
</head>

<body>
    <div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - cameras<br />
    </div>

    <canvas class="webgl"></canvas>

    <script type="module">
        import * as THREE from './three.module.js';

        console.log(THREE);
        const scene = new THREE.Scene();
        /**
        * Axes Helper
        */
        const axesHelper = new THREE.AxesHelper(2);// 2 is the length of the axes
        scene.add(axesHelper);


        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
        const mesh = new THREE.Mesh(geometry, material)
        console.log(mesh.position);
        // mesh.scale.x = 1
        // mesh.scale.y = 0.25
        // mesh.scale.z = 0.5 

        // mesh.position.set(0.7, - 0.6, 1)

        mesh.rotation.x = Math.PI * 0.25
        mesh.rotation.y = Math.PI * 0.25

        scene.add(mesh);




        // 加入相机
        const sizes = { width: 800, height: 600 }
        const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
        camera.position.z = 3 // 摄像机位置

        camera.lookAt(mesh.position)
        scene.add(camera);

        const canvas = document.querySelector('canvas.webgl')
        const renderer = new THREE.WebGLRenderer({ canvas: canvas });

        renderer.setSize(sizes.width, sizes.height) // 更新渲染器的绘制尺寸

        renderer.render(scene, camera)  // 渲染场景和相机
        console.log("==", mesh.position.distanceTo)



        /**
         * Animate
         */
        const tick = () => {
            console.log('tick')
            mesh.rotation.y += 0.01

            renderer.render(scene, camera)

            window.requestAnimationFrame(tick)
        }

        tick()


    </script>

</body>

</html>